<template>
	<view class="listWrap">
		<view class="queList sqSys"
			v-for="(item,index) in queList"
			:key="index"
		>
			<view class="queTit">Q{{index+1}}.{{item.title}} <text class="queType">【{{item.type}}】</text></view>
			<block v-if="item.type != '填空题'">
				<view class="queOptWrap">
					<block v-if="item.type == '单选题'">
						<view class="queOptItem"
							v-for="(innerItem,innerIndex) in item.optionsInfo"
							:key="innerIndex"
							@tap="selectSingle(index,innerIndex)"
						>
							<view class="cirRadSch" :class="[item.optIndex == innerIndex ? 'active' : '']">
								<view class="cir"></view>
							</view>
							<view class="optItemCon">{{innerItem.label}}</view>
						</view>
					</block>
					<block v-else>
						<view class="queOptItem"
							v-for="(innerItem,innerIndex) in item.optionsInfo"
							:key="innerIndex"
							@tap="selectMulti(item,innerItem)"
						>
							<view class="sqrCheck" :class="[innerItem.selFlag ? 'active' : '']">
								<view class="iconfont icon-duihao"></view>
							</view>
							<view class="optItemCon">{{innerItem.label}}</view>
						</view>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="queTxtArea">
					<textarea class="txtArea" v-model="item.myAns" :disabled="item.disabledFlag" placeholder="请输入(100个字内)" maxlength="100"></textarea>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			queList:Array
		},
		data(){
			return{
				currIndex:-1
			}
		},
		// computed:{
		// 	multiCls(){
		// 		return function(innerItem){
		// 			return{
		// 				'active' : innerItem.selFlag
		// 			}
		// 		}
		// 	}
		// },
		methods:{
			selectSingle(parIndex,sonIndex){
				this.$emit('selectSingle',parIndex,sonIndex)
			},
			selectMulti(item,innerItem){
				this.$emit('selectMulti',item,innerItem)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/common/radSqrSq.scss'; 
	.listWrap{
		padding:30rpx 20rpx 10rpx;
		background: #fff;
		border-radius: 10rpx;
		font-size: 28rpx;
		.queList{
			margin-bottom: 50rpx;
		}
		.queTit{
			font-size: 30rpx;
			color: $sq-main0;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.queType{
			color:$sq-main8;
			margin-left: 5rpx;
			font-weight: normal;
		}
		.txtArea,
		.queOptWrap{
			border: 1rpx solid #eee;
			border-radius: 10rpx;
		}
		.txtArea{
			width: 96%;
			padding: 2%;
			height: 200rpx;
			font-size: 29rpx;
			color: #555;
		}
		.queOptItem{
			min-height: 90rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 29rpx;
			color: #555;
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			&:last-child{
				border-bottom: none;
			}
		}
	}
</style>